<template>
  <v-card
      color="blue-grey darken-1"
      dark
      :loading="isUpdating"
  >
    <v-form>
      <v-container>
        <v-row>
          <v-card-title>
            请选择需要显示飞行轨迹的学员
          </v-card-title>
          <v-col cols="12">
            <v-autocomplete
                v-model="selectedStuList"
                :disabled="isUpdating"
                :items="stuListTmp"
                filled
                chips
                color="blue-grey lighten-2"
                label="浏览 / 搜索"
                item-text="name"
                item-value="name"
                multiple
            >
              <template v-slot:selection="data">
                <v-chip
                    v-bind="data.attrs"
                    :input-value="data.selected"
                    close
                    @click="data.select"
                    @click:close="remove(data.item)"
                >
                  <v-avatar left>
                    <v-img :src="data.item.avatar"></v-img>
                  </v-avatar>
                  {{ data.item.name }}
                </v-chip>
              </template>
              <template v-slot:item="data">
                <template v-if="typeof data.item !== 'object'">
                  <v-list-item-content v-text="data.item"></v-list-item-content>
                </template>
                <template v-else>
                  <v-list-item-avatar>
                    <img :src="data.item.avatar">
                  </v-list-item-avatar>
                  <v-list-item-content>
                    <v-list-item-title v-html="data.item.name"></v-list-item-title>
                    <v-row style="margin-top: -10px">
                      <v-col cols="1">
                        <span style="font-size: 14px; color: darkgray; ">{{data.item.group}}</span>
                      </v-col>
                      <v-col cols="11">
                        <span style="font-size: 14px; color: darkgray; ">飞行时间：{{data.item.time}}</span>
                      </v-col>
                    </v-row>

<!--                    <v-list-item-subtitle v-html="data.item.group"></v-list-item-subtitle>-->
                  </v-list-item-content>
                </template>
              </template>
            </v-autocomplete>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
    <v-divider></v-divider>
    <v-card-actions>
      <v-switch
          v-model="autoUpdate"
          :disabled="isUpdating"
          class="mt-0"
          color="green lighten-2"
          hide-details
          label="自动更新"
      ></v-switch>
      <v-spacer></v-spacer>
      <v-btn
          :disabled="autoUpdate"
          :loading="isUpdating"
          color="blue-grey darken-3"
          depressed
          @click="isUpdating = true"
      >
        <v-icon left>
          mdi-update
        </v-icon>
        现在更新
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  name: "Test",
  data () {
    const srcs = {
      1: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
      2: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
      3: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
      4: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
      5: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
    }

    return {
      autoUpdate: true,
      selectedStuList: [],
      isUpdating: false,
      people: [
        { header: '学员' },
        { name: '管笑', group: '学员', avatar: srcs[1] },
        { name: '江聪', group: '学员', avatar: srcs[2] },
        { name: '王文超', group: '学员', avatar: srcs[3] },
        { name: '吴郑轩', group: '学员', avatar: srcs[2] },
        { name: '向翔宇', group: '学员', avatar: srcs[2] },
        { name: '许陈长立', group: '学员', avatar: srcs[2] },
        { divider: true },
        { header: '教官' },
        { name: '教官 1', group: '教官', avatar: srcs[4] },
        { name: '教官 2', group: '教官', avatar: srcs[5] },
        { name: '教官 3', group: '教官', avatar: srcs[1] },
        { name: '教官 4', group: '教官', avatar: srcs[3] },
      ],
    }
  },
  computed: {
    stuListTmp() {
      return this.$store.state.stuListTmp
    },
  },
  watch: {
    isUpdating (val) {
      if (val) {
        setTimeout(() => (this.isUpdating = false), 3000)
      }
    },
    selectedStuList() {
      // console.log('selectedStuList', this.selectedStuList)
    }
  },

  methods: {
    remove (item) {
      const index = this.selectedStuList.indexOf(item.name)
      if (index >= 0) this.selectedStuList.splice(index, 1)
    },
  },
}
</script>
